<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<meta charset="utf-8">
<title>个人中心</title>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">

<link rel="stylesheet" href="css/mui.min.css" th:href="@{/web/css/mui.min.css}">
<link rel="stylesheet" href="css/home.css" th:href="@{/web/css/home.css}">
<link rel="stylesheet" type="text/css" href="css/icons-extra.css" th:href="@{/web/css/icons-extra.css}"/>
<link rel="stylesheet" type="text/css" href="css/app.css" th:href="@{/web/css/app.css}"/>
<link href="favicon.ico" type="image/x-icon" rel="icon">
<link href="iTunesArtwork@2x.png" sizes="114x114" rel="apple-touch-icon-precomposed">
<style>
    html,
    body {
        background-color: #efeff4;
    }
    .mui-views,
    .mui-view,
    .mui-pages,
    .mui-page,
    .mui-page-content {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        background-color: #efeff4;
    }
    .mui-pages {
        top: 46px;
        height: auto;
    }
    .mui-scroll-wrapper,
    .mui-scroll {
        background-color: #efeff4;
    }
    .mui-page.mui-transitioning {
        -webkit-transition: -webkit-transform 300ms ease;
        transition: transform 300ms ease;
    }
    .mui-page-left {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
    .mui-ios .mui-page-left {
        -webkit-transform: translate3d(-20%, 0, 0);
        transform: translate3d(-20%, 0, 0);
    }
    .mui-navbar {
        position: fixed;
        right: 0;
        left: 0;
        z-index: 10;
        height: 44px;
        background-color: #f7f7f8;
    }
    .mui-navbar .mui-bar {
        position: absolute;
        background: transparent;
        text-align: center;
    }
    .mui-android .mui-navbar-inner.mui-navbar-left {
        opacity: 0;
    }
    .mui-ios .mui-navbar-left .mui-left,
    .mui-ios .mui-navbar-left .mui-center,
    .mui-ios .mui-navbar-left .mui-right {
        opacity: 0;
    }
    .mui-navbar .mui-btn-nav {
        -webkit-transition: none;
        transition: none;
        -webkit-transition-duration: .0s;
        transition-duration: .0s;
    }
    .mui-navbar .mui-bar .mui-title {
        display: inline-block;
        width: auto;
    }
    .mui-page-shadow {
        position: absolute;
        right: 100%;
        top: 0;
        width: 16px;
        height: 100%;
        z-index: -1;
        content: '';
    }
    .mui-page-shadow {
        background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, .01) 50%, rgba(0, 0, 0, .2) 100%);
        background: linear-gradient(to right, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, .01) 50%, rgba(0, 0, 0, .2) 100%);
    }
    .mui-navbar-inner.mui-transitioning,
    .mui-navbar-inner .mui-transitioning {
        -webkit-transition: opacity 300ms ease, -webkit-transform 300ms ease;
        transition: opacity 300ms ease, transform 300ms ease;
    }
    /*.mui-page {*/
        /*display: none;*/
    /*}*/
    .mui-pages .mui-page {
        display: block;
    }
    .mui-page .mui-table-view:first-child {
        margin-top: 10px;
    }
    .mui-page .mui-table-view:last-child {
        margin-bottom: 30px;
    }
    .mui-table-view {
        margin-top: 10px;
    }

    .mui-table-view span.mui-pull-right {
        color: #999;
    }
    .mui-table-view-divider {
        background-color: #efeff4;
        font-size: 14px;
    }
    .mui-table-view-divider:before,
    .mui-table-view-divider:after {
        height: 0;
    }
    .head {
        height: 40px;
    }
    #head {
        line-height: 40px;
    }
    .head-img {
        width: 40px;
        height: 40px;
    }
    #head-img1 {
        position: absolute;
        bottom: 10px;
        right: 40px;
        width: 40px;
        height: 40px;
    }
    .update {
        font-style: normal;
        color: #999999;
        margin-right: -25px;
        font-size: 15px
    }
    .mui-fullscreen {
        position: fixed;
        z-index: 20;
        background-color: #000;
    }
    .mui-ios .mui-navbar .mui-bar .mui-title {
        position: static;
    }
    /*问题反馈在setting页面单独的css*/
    #feedback .mui-popover{
        position: fixed;
    }
    #feedback .mui-table-view:last-child {
        margin-bottom: 0px;
    }
    #feedback .mui-table-view:first-child {
        margin-top: 0px;
    }
    /*问题反馈在setting页面单独的css==end*/

</style>
<link rel="stylesheet" type="text/css" href="css/feedback.css" th:href="@{/web/css/feedback.css}"/>
<style>
    .mui-control-content {
        background-color: white;
        min-height: 215px;
    }
    .mui-control-content .mui-loading {
        margin-top: 50px;
    }
</style>
</head>
<body>
<div id="app" class="mui-views">
    <div class="mui-view">
        <div class="mui-navbar">
        </div>
        <div class="mui-pages">

<div id="address" class="mui-page">
    <div class="mui-navbar-inner mui-bar mui-bar-nav">
        <button type="button" class="mui-left mui-action-back mui-btn  mui-btn-link mui-btn-nav mui-pull-left">
            <span class="mui-icon mui-icon-arrowleft"></span>
        </button>
        <h1 class="mui-center mui-title">新增收货地址</h1>
    </div>
    <div class="mui-page-content">
        <div class="mui-scroll-wrapper">
            <div class="mui-scroll">

                <!--/*@thymesVar id="addressBean" type="com.example.demo.address.bean.AddressBean"*/-->
                <form class="mui-input-group" th:action="@{/web/addaddress}" method="post" th:object="${address}">

                    <input th:field="*{id}" type="hidden">
                    <div class="mui-input-row b-line">
                        <label>收货人：</label>
                        <input type="text" placeholder="收货人" th:field="*{name}">
                    </div>
                    <div class="mui-input-row b-line">
                        <label>手机号：</label>
                        <input type="text" class="mui-input-clear" placeholder="手机号" th:field="*{phone}" data-input-clear="3"><span class="mui-icon mui-icon-clear mui-hidden"></span>
                    </div>
                    <div class="mui-input-row b-line">
                        <label>省市区：</label>
                        <input type="text" class="mui-input-speech mui-input-clear" placeholder="省市区" th:field="*{add1}" data-input-clear="4" data-input-speech="4"><span class="mui-icon mui-icon-clear mui-hidden"></span>
                    </div>
                    <div class="mui-input-row b-line">
                        <label>详细地址：</label>
                        <input type="text" class="mui-input-clear" placeholder="详细地址" data-input-clear="3" th:field="*{add2}"><span class="mui-icon mui-icon-clear mui-hidden"></span>
                    </div>
                    <div class="mui-button-row b-line" style="padding:15px 0; height:auto">
                        <button class="mui-btn mui-btn-primary" type="submit" >确认</button>&nbsp;&nbsp;
                        <button class="mui-btn mui-btn-primary" type="button" >取消</button>
                    </div>


                </form>

            </div>
        </div>
    </div>
</div>

        </div>
    </div>
</div>
</body>
</html>